import React, {Component} from 'react';
import {TouchableOpacity, Text, StyleSheet, Button, View, StatusBar, FlatList} from 'react-native';
import RNFileSelector from 'react-native-file-selector';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import Colors from '../values/Colors';
import AsyncStorage from '@react-native-community/async-storage';
import store from '../redux/store';

export default class Location extends Component {
    constructor(props) {
        super(props);
        this.state = {
            musicList: [],
        };
        AsyncStorage.getItem('music_list')
            .then(value => {
                this.setState({
                    musicList: value && JSON.parse(value) || [],
                });
            });
    }

    componentDidMount() {
        this._navListener = this.props.navigation.addListener('didFocus', () => {
            StatusBar.setTranslucent(false);
            StatusBar.setBackgroundColor(Colors.colorPrimary);
        });
    }

    render() {
        return <>
            <StatusBar
                barStyle={'light-content'}
                backgroundColor={Colors.colorPrimary}
                translucent={false}
            />
            <View style={{height: 55, backgroundColor: Colors.colorPrimary}}>
                <Text style={{textAlign: 'center', fontSize: 20, lineHeight: 55}}>本地歌曲</Text>
            </View>
            <FlatList
                ref={ref => {
                    this.flatList = ref;
                }}
                renderItem={this._renderItem}
                data={this.state.musicList}
            />
            <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                <TouchableOpacity style={styles.addButton} activeOpacity={0.7} onPress={() => {


                    RNFileSelector.Show(
                        {
                            title: '选择本地歌曲文件',
                            onDone: (path) => {
                                this.setState({
                                    musicList: this.state.musicList.concat([path]),
                                });
                                AsyncStorage.setItem('music_list', JSON.stringify(this.state.musicList));
                            },
                            onCancel: () => {
                                console.log('cancelled');
                            },
                        },
                    );
                }}>
                    <FontAwesome name='wpforms' size={25} color={'white'}/>
                </TouchableOpacity>

            </View>
        </>;

    }

    _renderItem = (item) => {
        return <TouchableOpacity key={item.index} onPress={() => {
            store.getState().MusicList = {
                list: this.state.musicList,
                index: item.index,
            };
            this.props.navigation.navigate('LocalMusicPlayer', {song: item.item});
        }}>
            <Text style={{fontSize: 20, lineHeight: 48, paddingHorizontal: 15}}>
                {item.item.split('/').pop()}
            </Text>
            <View style={{height: 0.4, backgroundColor: '#dbdada'}}/>
        </TouchableOpacity>;
    };
}

const mapStateToProps = (state) => {
    return {
        barStyle: state.viewStyle.barStyle,
    };
};

const styles = StyleSheet.create({
    addButton: {
        position: 'absolute',
        bottom: 40,
        width: 50,
        height: 50,
        right: 40,
        backgroundColor: '#526dfa',
        borderRadius: 25,
        justifyContent: 'center',
        alignItems: 'center',
        elevation: 5,
    },
});
